<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#product {
				/*清除浮动*/
				overflow: hidden;
			}
			
			#product>div {
				float: left;
			}
			
			img {
				height: 300px;
				width: auto;
			}
			
			;
		</style>
	</head>

	<body>
		<div id="title"></div>
		<div id="product"></div>
	</body>
	<script>
		/*
											var viewcommand = (function() {
												//方法集合
												var Action = {
													//创建方法
													create: function(),
													//展示方法
													display: function() {}
													//命令接口
													return function excute()
												}
										})();*/

		//格式化字符串如: '<div> {#content#} </div>'用{content: 'demo'}替换后可得到字符串: '<div> demo </div>'
		function formateString(str, obj) {
			//替换'{#与#}之间的字符串
			return str.replace(/\{#(\w+)#\}/g, function(match, key) {
				return obj[key];
			})
		}

		//创建模块视图就可通过对模块视图数据进行字符串模板格式化来获取， 并封装在create方法里。”
		var viewcommand = (function() {
			var tpl = {
				//展示图片结构模板
				product: [
					'<div>',
					'<img src="{#src#}"/>',
					'<p> {#text#}</p>',
					'</div>'
				].join(''),
				//展示标题结构模板
				title: [
					'<div class="title">',
					'<div class="main">',
					'<h2> {#title#}</h2>',
					'<p> {#tips#}</p>',
					'</div>',
					'</div>'
				].join('')
			};

			var html = '';

			//方法集合
			var Action = {
				//创建方法
				create: function(data, view) {
					//解析数据如果数据是一个数组
					if(data.length) {
						//遍历数组
						for(var i = 0, len = data.length; i < len; i++) {
							//将格式化之后的字符串缓存到htmI中
							html += formateString(tpl[view], data[i]);
						}
					} else {
						//直接格式化字符串缓存到html中
						html += formateString(tpl[view], data);
					}
				},
				//展示方法
				display: function(container, data, view) {
					//如果传入数据
					if(data) {
						//根据给定数据创建视图
						this.create(data, view);
					}
					//展示模块
					if(html) {
						document.getElementById(container).innerHTML = html;
					}
					//展示后清空缓存的字符串
					html = '';
				}
			}
			//命令接口
			return function excute(msg) {
				//解析命令，如果msg.param不是数组则将其转化为数组(apply方法要求第二个参数为数组)
				msg.param = Object.prototype.toString.call(msg.param) === "[object Array]" ? msg.param : [msg.param];
				// Action内部调用的方法引用this,所以此处为保证作用域this执行传入Action 
				Action[msg.command].apply(Action, msg.param)
			}
		})();
		//测试
		//产品展示数据
		var productData = [{
					src: 'command/1.webp',
					text: '111'
				},
				{
					src: 'command/2.webp',
					text: '222'
				}, {
					src: 'command/3.webp',
					text: '333'
				}
			],
			//模块标题数据
			titleData = {
				title: '夏日里的一片温馨',
				tips: '暖暖的温情带给人们家的感受。'
			};

		viewcommand({
			//参数说明 方法display
			command: 'display',
			//参数说明  param1 元素容器;param2 标题数据;param3 元素模板;详见display方法
			param: ['title', titleData, 'title']
		});
		//你可以创建一个图片。
		viewcommand({
			command: 'create',
			//详见create 方法参数
			param: [{
				src: 'command/0.webp',
				text: '火焰'
			}, 'product']
		})
		// 当然你想创建多张图片也很简单。
		viewcommand({
			command: 'display',
			param: ['product', productData, 'product']
		})
	</script>

</html>